Hier möchte ich euch zeigen, wie man ein You Tube Video in WordPress ohne Plugin einbinden kann, so dass es auch für Responsives Design optimal angezeigt wird.

Seit HTML5 kann man Videos ganz einfach mit dem video Tag einbinden. Dieser wird im Prinzip von allen Browsern unterstützt und die Videos werden auch responsive angezeigt.
Allerdings behält sich You Tube vor, die Videos mit einem iframe auszuliefern, welcher in WordPress eingebunden nicht auf das HTML5 video Tag reagiert.
Es gibt nun doch Möglichkeiten, bzw. hier zeige ich eine Möglichkeit auf, wie man das auch ohne Plugin lösen kann.
Im Prinzip ist es schon eine bekannte Sache, welche früher unter „elastic video“ im Netz zu finden ist.
Allerdings hat sich da in WordPress etwas geändert und die damalige Lösung funktioniert zumindest bei mir nicht mehr und wie es scheint, auch bei anderen.
Aus diesem Grund möchte ich euch eine Lösung zeigen, die funktioniert.

Wieder ein Plugin “ gespart“.

Immer wieder suche ich Lösungen, wie man Plugins sparen kann. Allerdings haben diese Lösungen auch NACHTEILE.

Nämlich beim Themewechsel, bleibt alles in den Themedateien. Wer also dann keine ordentliche Dokumentation gemacht hat, kann sich alles mühevoll zusammensuchen.

TIPP:

Immer eine gute Doku anlegen !
Dann findet man auch bei Themewechsel alles wieder :-)

So und nun zum how to:

SCHRITT EINS:

functions.php öffnen und folgendes reinschreiben:

add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;

function custom_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<div class="video-container">'.$html.'</div>';
    return $return;
}

SCHRITT ZWEI:

style.css öffnen und folgendes einfügen:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
<span style="color: #3366ff;">}</span>

SCHRITT DREI:

You Tube Embed Code einbinden

Dazu den WordPress Beitragseditor im Backend öffnen, wo das Video halt rein soll. Am besten in der Textansicht den You Tube Embed Code einfügen. Und diesen in folgenden div packen:

<div class="video-container">hier der You Tube Embed Code .. </div>

Das war`s. Damit skalieren die Videos sehr schön und behalten immer die Form.
Ohne den Eintrag in der functions.php greift der CSS Code nicht mehr, seit ca einem Jahr in WordPress.

Quellen:

• CSS- Elastic- Videos
• WordPress Support – How to make Embedded You Tube Videos responsive

WEITERFÜHRENDE LINKS

• Videos einbetten in die eigene Webseite
• Mediathek in WordPress Teil1

In diesem Artikel könnt ihr das eingebunden Video ansehen.